.galleryItem {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grid-p-1 {
  grid-template-areas: 'c11';
}

.c-11 {
  grid-area: c11;

  aspect-ratio: 16/9;
}

/* IF 2 Photos */
.grid-p-2 {
  grid-template-areas: 'c12 c22';
}

.c-12 {
  grid-area: c12;
  aspect-ratio: 8/9;
}

.c-22 {
  grid-area: c22;
  aspect-ratio: 8/9;
}

/* IF 3 Photos */

.grid-p-3 {
  grid-template-areas:
    'c13 c23'
    'c13 c33';
  gap: 4px;
}

.c-13 {
  grid-area: c13;
}

.c-23 {
  grid-area: c23;

  aspect-ratio: 16 / 9;
}

.c-33 {
  grid-area: c33;

  aspect-ratio: 16 / 9;
}

/* IF 4 */
.grid-p-4 {
  grid-template-areas:
    'c14 c34'
    'c24 c44';
}

.grid-p-4 .galleryItem {
  aspect-ratio: 16 / 9;
}

.c-14 {
  grid-area: c14;
}

.c-24 {
  grid-area: c24;
}

.c-34 {
  grid-area: c34;
}

.c-44 {
  grid-area: c44;
}
